extensionPrefs: Don't fill view

Extension rows contain both name/description and controls to
open preferences and enable/disable the extension. Those
elements become disassociated when the row expands too much
horizontally, so instead of filling the entire view, switch
to the embedded list style[0].

[0] https://developer.gnome.org/hig/stable/lists.html.en

https://gitlab.gnome.org/GNOME/gnome-shell/issues/1968

diff --git a/js/extensionPrefs/main.js b/js/extensionPrefs/main.js
index 5468e539e301c3e9b4b18bab505259d0c50811ea..55172fb54ac5f4eaef9ffbd857ede4359c775842 100644 (file)
--- a/js/extensionPrefs/main.js
+++ b/js/extensionPrefs/main.js
@@ -524,6 +524,7 @@ class ExtensionRow extends Gtk.ListBoxRow {
         let desc = this._extension.metadata.description.split('\n')[0];
         label = new DescriptionLabel({ label: desc, wrap: true, lines: 2,
                                        ellipsize: Pango.EllipsizeMode.END,
+                                       max_width_chars: 60,
                                        xalign: 0, yalign: 0 });
         vbox.add(label);
 

diff --git a/js/extensionPrefs/ui/extensions-window.ui b/js/extensionPrefs/ui/extensions-window.ui
index 6fa3f57195b1f9b966b3522b8a53251ede299309..8c235f4a03262de2c9c0219d2495fcae5fbb10bf 100644 (file)
--- a/js/extensionPrefs/ui/extensions-window.ui
+++ b/js/extensionPrefs/ui/extensions-window.ui
@@ -32,9 +32,20 @@
               <object class="GtkViewport">
                 <property name="visible">True</property>
                 <child>
-                  <object class="GtkListBox" id="extensionsList">
+                  <object class="GtkBox">
                     <property name="visible">True</property>
-                    <property name="selection_mode">none</property>
+                    <property name="orientation">vertical</property>
+                    <property name="halign">center</property>
+                    <property name="margin">36</property>
+                    <child>
+                      <object class="GtkListBox" id="extensionsList">
+                        <property name="visible">True</property>
+                        <property name="selection_mode">none</property>
+                        <style>
+                          <class name="frame"/>
+                        </style>
+                      </object>
+                    </child>
                   </object>
                 </child>
               </object>